<template>
    <div class="px-5 pt-3">
        <textarea
            class="outline-none bg-none w-full rounded-md border border-blue-400"
            rows="8"
            v-model="textContent"
        ></textarea>

        <div class="flex justify-center space-x-4 mt-4">
            <button class="text-white bg-yellow-400 px-3 py-2" @click="textContent = ''">清空</button>
            <button
                class="text-white px-3 py-2"
                :class="!textContent.length ? 'bg-blue-100' : 'bg-blue-500'"
                @click="save"
                :disabled="!textContent.length"
            >
                发布
            </button>
        </div>
    </div>
</template>

<script>
import { addBlog } from '../api/blog'

export default {
    data: () => ({
        textContent: '',
    }),

    methods: {
        async save() {
            const {
                data: { success, message },
            } = await addBlog(this.$http, { account: this.$store.state.user.account, content: this.textContent })

            if (!success) {
                window.alert('发布失败')
                return
            }
            window.alert(message)
            this.textContent = ''
        },
    },
}
</script>

<style></style>
